<template>
  <div class="dingdandaoru">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;"
          class="flexbc">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">订单管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/dingdanguanli/dingdanchuli' }">我的订单</el-breadcrumb-item>
            <el-breadcrumb-item>导入订单</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
          <div style="margin-right: 20px; margin-bottom: 20px;" class="flexc">
            <div>
              <el-upload class="upload-demo" action="#" :http-request="ordergoweixin" :show-file-list="false">
                <el-button type="primary" round>导入订单</el-button>
              </el-upload>
            </div>
            <div style="cursor: pointer; margin-left: 10px; color: #999; font-size: 14px;"
              @click="xiazai('https://file.91haoka.cn/gantanhao/xiaoluohaodaorudingdan2.xlsx?attname=')">下载模板
            </div>
          </div>
          <div>
            <el-table :data="list" style="width: 100%">
              <el-table-column fixed align="center" prop="name" label="导入表名称"></el-table-column>
              <el-table-column fixed align="center" prop="created_at" label="导入时间"></el-table-column>
              <el-table-column fixed align="center" prop="success_count" label="导入订单数"></el-table-column>
              <el-table-column fixed align="center" prop="status_name" label="状态">
                <template slot-scope="scope">
                  <div v-if="scope.row.status == 30" style="color: rgb(31, 159, 48);"> {{scope.row.status_name}}</div>
                  <div v-if="scope.row.status == 20" style="color: rgb(247, 64, 64);"> {{scope.row.status_name}}</div>
                  <div v-if="scope.row.status == 10" style="color: rgb(255, 158, 0);"> {{scope.row.status_name}}</div>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination style="text-align: right; padding: 20px" background layout="prev,pager,next,total,jumper"
              :current-page="search2.page" @current-change="fanye" :page-size="search2.page_size" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div v-if="shoujiban" style=" color: rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb; padding-top: 1rem;">
      <topandleft></topandleft>
      <div style="background: #fff; padding: 0.3rem;">
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="width: 2px; height: 0.2rem; background: rgb(2, 12, 29); margin-right: 10px; overflow: hidden;">
          </div>
          <div style="font-size: 0.36rem; font-weight: bold;">订单管理</div>
        </div>
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="color: rgb(175, 179, 188);">首页</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div style="color: rgb(175, 179, 188);">我的订单</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div>导入订单</div>
        </div>
      </div>
      <div style="padding: 0.3rem;">
        <div style="margin-right: 20px; margin-bottom: 20px;" class="flexc">
          <div>
            <el-upload class="upload-demo" action="#" :http-request="ordergoweixin" :show-file-list="false">
              <el-button type="primary" round>导入订单</el-button>
            </el-upload>
          </div>
          <div style="cursor: pointer; margin-left: 10px; color: #999; font-size: 14px;"

            @click="xiazai('https://file.91haoka.cn/gantanhao/xiaoluohaodaorudingdan2.xlsx?attname=')">下载模板
          </div>
        </div>
        <div>
          <el-table :data="list" style="width: 100%">
            <el-table-column fixed align="center" prop="name" label="导入表名称"></el-table-column>
            <el-table-column fixed align="center" prop="created_at" label="导入时间"></el-table-column>
            <el-table-column fixed align="center" prop="success_count" label="导入订单数"></el-table-column>
            <el-table-column fixed align="center" prop="status_name" label="状态">
              <template slot-scope="scope">
                <div v-if="scope.row.status == 30" style="color: rgb(31, 159, 48);"> {{scope.row.status_name}}</div>
                <div v-if="scope.row.status == 20" style="color: rgb(255, 158, 0);"> {{scope.row.status_name}}</div>
                <div v-if="scope.row.status == 10" style="color: rgb(247, 64, 64);"> {{scope.row.status_name}}</div>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination style="text-align: right; padding: 20px" background layout="prev,pager,next,total,jumper"
            :current-page="search2.page" @current-change="fanye" :page-size="search2.page_size" :total="total">
          </el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import topandleft from '../topandleft.vue'
  export default {
    name: 'dingdandaoru',
    components: {
      left,
      top,
      topandleft,
      footers
    },
    data() {
      return {
        all: {},
        shoujiban: false,
        list: [],
        search2:{
          page:1,
          page_size:20
        },
        total:0
      }
    },
    created() {
      this.getlist()
    },
    mounted() {
      if (window.screen.width < 1080) {
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;
      }
    },
    methods: {
      xiazai: function(url) {
        window.location.href = url
      },
      getlist: function() {
        axios.get("/own/order/import/get", { params: this.search2})
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data;
              this.total = response.data.data.total;

            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      },
      fanye: function (val) {
        this.search.page = val;
        this.getlist();
      },
      ordergoweixin: function(file) {

        let ff = this.duwenjian(file);

        ff.then((res) => {
          let data = [];
          res.forEach((item) => {
            let obj = {
              "goods_sku": item["商品编码"], //商品编码
              "address_name": item["收货人姓名"], //收货人姓名
              "address_province": item["收货省"], //收货省
              "address_city": item["收货市"], //收货市
              "address_district": item["收货区"], //收货区
              "address": item["详细地址"], //详细地址
              "mobile": item["收货手机号码"], //收货手机号码
              "id_card_name": item["身份证姓名"], //身份证姓名
              "id_card_num": item["身份证号"], //身份证号
              "pretty_number": item["购买号码"] //身份证号
            };
            data.push(obj);
          });

          let obj = {
            name: file.file.name,
            datas: data
          }

          axios
            .post("/own/order/import", obj)
            .then((response) => {
              if (response.data.msg.code == 0) {
                this.$message.success('上传完成');
                this.getlist();
              } else {
                this.$message.error(response.data.msg.info);
              }
            });
        });

      },
    }
  }
</script>


<style scoped lang="less">
  .dingdandaoru {
    /deep/ .el-table__header .el-table__cell{ background: transparent !important;}
  }
</style>
